<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本环境构建</title>
    <!--    引入本地的vue.js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>


<!--初始化一个容器  后续和vm实例进行绑定 实现数据的动态渲染-->

<div id="app">
    <h1>div1  app</h1>
</div>

<div class="app">
    <h1>div2  app</h1>
</div>

<!--
    注：
        1. 使用template 实现模版设置时  模板的内容必须包裹在一个根标签中
        2. 编写template模板时可以使用 `` 替代字符串的拼接
        3. 使用template 实现数据渲染    会覆盖容器中原有的内容
        4. vue 实例和容器进行绑定时     不一定使用id选择器
        5. 一个容器只能被一个vue实例绑定   一个vue实例也只能绑定一个容器

-->
<script type="text/javascript">
    // 1.创建vue实例
    // const vm = new Vue({
    //     template: '<div>' +
    //                 '<h1>hello vue</h1>' +
    //                 '<h1>hello javascript</h1>' +
    //               '</div>'
    // })

    const vm = new Vue({
        template: `<div>
                    <h1>hello vue</h1>
                    <h1>hello javascript</h1>
                   </div>`
    })
    //2. vue实例和容器的绑定
    // vm.$mount(document.getElementById("app"))
    vm.$mount("#app")
    // vm.$mount(".app")
</script>

</body>
</html>
